<template>
    <app-layout>
        <view class="clerk-list">
            <view @click="clerkDialog = true" class="clerk-info main-between cross-center">
                <view class="clerk-label">核销员</view>
                <view class="dir-right-nowrap cross-center">
                    <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
                    <view>{{clerk && clerk.user ? clerk.user.nickname : '请选择'}}</view>
                </view>
            </view>
            <view class="clerk-info main-between cross-center no-border">
                <view class="clerk-label">所属门店</view>
                <view>{{clerk && clerk.store && clerk.store.length > 0 ? clerk.store[0].name : ''}}</view>
            </view>
        </view>
        <view class="clerk-list">
            <view class="clerk-remark">
                <view class="clerk-label">核销备注</view>
                <textarea class="textarea" maxlength="255" v-model="remark" placeholder="请输入备注内容"></textarea>
            </view>
        </view>
        <view @click="clerkSubmit" class="clerk-btn">确定核销订单</view>
        <view v-if="clerkDialog" class="dialog">
            <view :class="['pick-list', `${iphone_x? 'iphone_x':''}`]">
                <view class="pick-title">选择核销员</view>
                <view @click="clerkDialog = false;" class="close-icon">
                    <image src='/static/image/icon/icon-close.png'></image>
                </view>
                <view @click="choose(item)" class="pick-item main-between cross-center" :style="{'color': clerk && clerk.user_id == item.user_id ? '#446dfd' : '#3333333'}" v-for="item in list" :key="item.id">
                    <view class="pick-name t-omit">{{item.user.nickname}}</view>
                    <image v-if="clerk && clerk.user_id == item.user_id" class="active-icon" src='./../image/check.png'></image>
                </view>
            </view>
        </view>
    </app-layout>
</template>
<script>
import { mapState } from "vuex";

export default {
    data() {
        return {
            clerkDialog: false,
            iphone_x: false,
            store_id: 0,
            list: [],
            id: null,
            clerk: null,
            remark: '',
            sign: '',
            week_number: ''
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            adminImg: state => state.mallConfig.__wxapp_img.app_admin,
        })
    },
    methods: {
        choose(item) {
            this.clerk = item;
            setTimeout(()=>{
                this.clerkDialog = false;
            },0)
        },
        getClerk(page) {
            this.$request({
                url: this.$api.app_admin.clerk,
                data: {
                    store_id: this.store_id,
                    page: page,
                }
            }).then(response => {
                uni.hideLoading();
                if (response.code == 0) {
                    this.list = this.list.concat(response.data.list)
                    if (response.data.list.length == response.data.pagination.pageSize && page < response.data.pagination.page_count) {
                        page++;
                        this.getClerk(page);
                    }
                } else {
                    uni.showToast({
                        title: response.msg,
                        icon: 'none',
                        duration: 1000
                    });
                }
            });
        },
        clerkSubmit() {
            if(!this.clerk) {
                uni.showToast({
                    title: '请选择核销员',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }
            uni.showLoading({
                mask: true,
                title: '核销中...'
            });
            let para = {
                order_id: this.id,
                clerk_id: this.clerk.user_id,
                action_type: 2,// 后台确认核销
                clerk_remark: this.remark,
                plugin: this.sign
            }
            if(this.sign == 'weekly_buy') {
                para.week_number = this.week_number;
            }
            this.$request({
                url: this.$api.app_admin.order_clerk,
                method: "POST",
                data: para
            }).then(response => {
                uni.hideLoading();
                if (response.code == 0) {
                    let msg = response.msg;
                    uni.showToast({
                        title: msg,
                        duration: 1000,
                        icon: 'success',
                        mask: false
                    });
                    setTimeout(function() {
                        uni.navigateBack();
                    }, 500)
                } else {
                    uni.showToast({
                        title: response.msg,
                        icon: 'none',
                        duration: 1000
                    });
                }
            }).catch(response => {
                uni.hideLoading();
                uni.showToast({
                    title: response,
                    icon: 'none',
                    duration: 1000
                });
            });
        }
    },
    onLoad(options) { this.$commonLoad.onload(options);
        this.id = options.id;
        this.sign = options.sign;
        this.store_id = options.store_id;
        this.week_number = this.sign == 'weekly_buy' && options.week_number ? options.week_number : '';
        this.iphone_x = this.$utils.checkIphone();
        uni.showLoading({
            mask: true,
            title: '加载中...'
        });
        this.getClerk(1);
    }
}
</script>
<style lang="scss" scoped="">
    .dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        z-index: 10;
        .pick-list {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 600rpx;
            width: 100%;
            z-index: 11;
            background-color: #fff;
            border-radius: 16rpx 16rpx 0 0;
            font-size: 28rpx;
            padding-top: 74rpx;
            overflow: auto;
            &.iphone_x {
                padding-bottom: #{50rpx};
            }
            .pick-title {
                position: fixed;
                bottom: 526rpx;
                left: 0;
                height: 74rpx;
                line-height: 74rpx;
                width: 100%;
                border-radius: 16rpx;
                text-align: center;
                color: #999;
                z-index: 12;
                background-color: #fff;
            }
            .close-icon {
                position: fixed;
                bottom: 497rpx;
                right: 0;
                z-index: 12;
                padding: 29rpx 27rpx;
                image {
                    width: 30rpx;
                    height: 30rpx;
                }
            }
            .pick-item {
                height: 80rpx;
                color: #333;
                padding: 0 24rpx;
                .pick-name {
                    width: 500rpx;
                }
                image {
                    width: 36rpx;
                    height: 36rpx;
                }
            }
        }
    }
    .clerk-list {
        width: 702rpx;
        margin: 24rpx;
        border-radius: 16rpx;
        background-color: #fff;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #999999;
        .to-more {
            height: #{24rpx};
            width: #{12rpx};
            display: block;
            margin-left: 20rpx;
        }
        .clerk-label {
            font-weight: 600;
            flex-shrink: 0;
            margin-right: 10rpx;
            color: #333333;
        }
        .clerk-info {
            min-height: 88rpx;
            border-bottom: 2rpx solid #e2e2e2;
            &.no-border {
                border-bottom: 0;
            }
        }
        .clerk-remark {
            padding: 20rpx 0;
            .clerk-label {
                margin-bottom: 15rpx;
            }
            .textarea {
                height: 500rpx;
                font-size: 28rpx;
                width: 100%;
            }
            textarea {
                padding-left: 0!important; 
                padding-right: 0!important; 
            }
        }
    }
    .clerk-btn {
        width: 702rpx;
        margin: 40rpx auto;
        border-radius: 40rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        background-color: #446dfd;
        color: #fff;
        font-size: 28rpx;
    }
</style>